<template>
  <div class="shequ-main">
    <div class="shequ-up">
      <EchartBar :XAxis="XAxis" :YAxis="YAxis" :xData="dataShequZNH.barXData" :barData="dataShequZNH.barYData" :barColor="barColor" :barBgColor="barBgColor" :barGrid="barGrid" :seriesLabel="seriesLabel" :barBgShow="barBgShow" :dataAxis="dataAxis" :barWidth="barWidth">
      </EchartBar>
    </div>
    <div class="shequ-down">
      <ElTable :tableConfig="dataShequZNH.config" :tableData="dataShequZNH.tableData" :tableInterval="tableInterval"></ElTable>
    </div>
  </div>
</template>

<script>
import ElTable from "@/components/ElTable.vue";
import { request } from '@/api/request.js'
import EchartBar from "@/components/EchartBar.vue";
export default {
  name: 'ViewShequ',
  data() {
    return {
      tableInterval:2500,
      dataShequZNH: [],
      labelColor:'',
      barXData: [],
      barYData: [],
      barBgShow: true,
      dataAxis: 'x',
      barWidth: "40%",
      barGrid: {
        left: '10%',
        right: '5%',
        top: '10%',
        bottom: '10%'
      },
      seriesLabel: {
        show: true,
        position: 'insideRight',
        color: '#fff',
        fontSize:12,
      },
      baseseriesLabelFontSize:12,
      seriesLabelFontSize:12,
      XAxis: {
        type: 'value',
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        }
      },
      YAxis: {
        type: 'category',
        data:'',
        // data: ['摄像头', '空调', '门禁', '供水', '供电'],
        inverse: true,
        axisLabel: {
          // 浅色系用色--#0f7261，深色系用色--#c5e1f0
          color: '#c5e1f0',
          fontSize:12,
          margin:8
        },
        label: {

        }
      },
      baseAxisLabelFontSize:12,
      axisLabelFontSize:12,
      baseAxisLabelMargin:8,
      axisLabelMargin:8,
      barColor: '#358dd8',
      barBgColor: '#38484a'
    }
  },
  beforeMount() {
    this.getShequZNH();
  },
  methods: {
    getShequZNH() {
      request({
        url: '/zhinenghuaTable',
        method: 'get'
      }).then(res => {
        this.dataShequZNH = res.data;
      })
    }
  },
  components: {
    ElTable,
    EchartBar
  },
  watch: {
    '$store.state': {
      deep: true,
      immediate: false,
      handler() {
        this.$nextTick(()=>{
          this.XAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.YAxis.axisLabel.color = this.$store.state.colors.barLabelZiColor;
          this.YAxis.axisLabel.fontSize = this.baseAxisLabelFontSize * parseFloat(this.$store.state.htmlScale);
          this.YAxis.axisLabel.margin = this.baseAxisLabelMargin * parseFloat(this.$store.state.htmlScale);
          this.seriesLabel.fontSize = this.baseseriesLabelFontSize * parseFloat(this.$store.state.htmlScale);
          this.barColor = this.$store.state.colors.barColor
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
.shequ-main {
  width: 100%;
  height: 85%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border: 0px solid red;

  .shequ-up {
    width: 100%;
    height: 50%;;
    box-sizing: border-box;
    border: 0px solid red;
  }

  .shequ-down {
    width: 100%;
    max-height: 10rem;
    box-sizing: border-box;
    overflow: hidden;
    border: 0px solid blue;
  }
}
</style>
